<template>
    <div class="Page">
        <nav-bar :page="titleConfig"></nav-bar>
        <div class="container">
            <router-view></router-view>
        </div>

        <van-tabbar route>
            <van-tabbar-item replace to="/home" icon="home-o">
                首页
            </van-tabbar-item>
            <van-tabbar-item replace to="/add" icon="plus">
                发布
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script lang="ts">
    import { Component, Vue, Watch } from "vue-property-decorator";
    import NavBar from "@/components/NavBar.vue";

    Component.registerHooks(["beforeRouteEnter", "beforeRouteLeave"]);

    @Component({
        name: 'index',
        components: {
            NavBar
        }
    })
    export default class Page extends Vue {
        private titleConfig: any ={}
        private pages: any = {
            home: {
                title: '首页',
                left: false,
                rightText: ''
            },
            add: {
                title: '发布',
                left: false,
                rightText: ''
            },
            detail: {
                title: '详情',
                left: true,
                rightText: ''
            }
        };
        @Watch('$route',{ deep: true })
        private routerChange(newVal: any) {
           this.titleConfig = this.pages[newVal.name]
        }

        private created() {
            this.titleConfig = this.pages[(this.$route as any).name]
        }
    }
</script>
<style scoped>
    .Page {
        width: 100%;
        height: 100%;
    }
    .container {
        position: absolute;
        top: 3rem;
        bottom: 3rem;
        left: 4px;
        right: 4px;
        background: #ffffff;
        margin-top: 10px;

    }.Page >>> .van-tabbar--fixed  {
         background-color: #f6f6f6;
     }

    .Page >>> .van-tabbar--fixed .van-tabbar-item--active {
         color: #ff6600;
     }

</style>
